<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
            background: palevioletred;
        }
        textarea {
            width: 300px;
            height: 30px;
            padding: 10px;
            border-color: transparent;
            outline: none;
            resize: none;
            background: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <textarea id="textarea" placeholder="发一条友善的评论" rows="2"></textarea>

    <script>
        // 事件对象
        const box = document.querySelector('.box')
        box.addEventListener('click',function(e){
            console.log(e)
        })
        const textarea = document.querySelector('#textarea')
        textarea.addEventListener('keyup',function(e){
            console.log(e)
            console.log(e.key)
        // 用户如果按下的是回车键，则弹出框提示按下了回车键
            if(e.key === 'Enter') {
                alert('你按了回车')
            }
        })

    </script>
</body>
</html>